<template>
	<view>
		<cu-custom :isBack="true">
			<block #content>
				执行命令
			</block>
		</cu-custom>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" :up="upOption"
			@up="getDeviceBatchCmdLogList" :top="'200rpx'" style="position:relative;z-index:1;width:100%;">
			<view class="margin-lr">
				<view v-for="(arrItem,arrIndex) in cmdLogList" :key="arrIndex">
					<view v-for="(item,index) in arrItem" :key="index" @tap="deviceInfo(item)">
						<view class="flex justify-start align-center padding-tb-sm"
							style="border-bottom: 1px solid rgba(0, 0, 0, .1);">
							<img style="width:80rpx;height:auto" src="../../assets/images/device.png" alt="" mode="widthFix">
							<view class="flex-sub margin-left-xl">
								<view class="text-df text-title text-bold">{{item.deviceName}}</view>
								<view class="text-df text-title text-bold">
									<text>命令状态 : </text><text :style="[{color:themeConfig.primaryColor}]">{{item.cmdStatusContext}}</text>
								</view>
							</view>
							<view class="cuIcon-right text-gray" style="font-size:30rpx;"></view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import {
		showToast,
		showLoading,
		hideLoading
	} from '@/util/toast'
	import * as ztIotApi from '@/api/dmIot/ztIotApi.ts'
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins';
	export default {
		name: "operlogInfo",
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		data() {
			return {
				downOption: {
					use: true,
					auto: false //是否在初始化后,自动执行downCallback; 默认true
				},
				upOption: {
					auto: false,
					empty: {
						use: true,
						fixed: true,
						top: '20%'
					},
				},
				batchCmdLogId:-1,
				cmdLogList: [],
				currentPage: 1,
				pageSize: 10,
				lastPage: -1,
				lastIndex: -1,
				total: -1,
			}
		},
		computed: {
			themeConfig() {
				return this.$store.state.themeConfig
			}
		},
		onLoad(option) {
			this.batchCmdLogId = option.id
			this.getDeviceBatchCmdLogList()
		},
		methods: {
			downCallback() {
				this.currentPage = 1
				this.cmdLogList = []
				this.mescroll.resetUpScroll()
			},
			getDeviceBatchCmdLogList() {
				let currentPage = this.currentPage
				let pageSize = this.pageSize
				let params = {
					batchCmdLogId:this.batchCmdLogId,
					pageNum: currentPage,
					pageSize
				}
				ztIotApi.getDeviceBatchCmdLogList(params).then((res) => {
					const {
						code,
						msg,
						rows,
						total,
						success
					} = res
					if (success) {
						let cmdStatusList = [{"key":10,"value":"执行成功"},{"key":11,"value":"执行失败"},{"key":12,"value":"设备离线"}]
						for (var i = 0; i < rows.length; i++) {
							let cmdStatus = rows[i].cmdStatus
							let {value} = cmdStatusList.find((item)=>{
								return item.key === cmdStatus
							})
							rows[i]["cmdStatusContext"] = value
						}
						// console.log("------cmdStatusList")
						// console.log(rows)
						const lastPage = Math.ceil(total / pageSize)
						const lastIndex = total % pageSize
						this.mescroll.endSuccess(rows.length, currentPage < lastPage)
						this.$set(this.cmdLogList, currentPage - 1, rows)
						this.lastPage = lastPage
						this.lastIndex = lastIndex
						this.total = total
						if (currentPage < lastPage) {
							this.currentPage = currentPage + 1
						}
					}
				})
			},
			deviceInfo(item) {
				uni.navigateTo({
					url: `/pages/deviceInfo/deviceInfo?id=${item.deviceId}`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	
	.text-title {
		color: #3f3f44;
	}
</style>
